<template>
  <h1>组件生命周期</h1>
  <h2>{{num}}</h2>
  <button @click="increment">+</button>
  <hr>
  <table>
    <tr>
      <td>序号</td>
      <td>名称</td>
      <td>单价</td>
      <td>数量</td>
      <td>小计</td>
    </tr>
    <tr v-for="(item,index) in list" :key="item._id">
      <td>
        <input type="checkbox" :checked="item.checked">
      </td>
      <td>{{item.name}}</td>
      <td>{{item.price}}</td>
      <td>{{item.num}}</td>
      <td>{{item.price*item.num}}</td>
    </tr>
  </table>
</template>

<script>
import {reactive,toRef,toRefs,onMounted,onBeforeMount,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
import api from '../http/api'
export default {
  setup(){
    const state=reactive({
        num:0,
        list:[]
    })
    const increment=()=>{
        state.num++
    }
    console.log('-----setup---------');
    const getShopCart=async()=>{
       let result= await api.shopcart.getShopCartListApi()
       state.list=result.data.data;
       console.log('数据',state.list);
    }

    // onBeforeMount(()=>{
    //   console.log('-----onBeforeMount---------');
    // })
    onMounted(()=>{
     getShopCart()
    })
    // onBeforeUpdate(()=>{
    //    console.log('------onBeforeUpdate-------');
    // })
    // onUpdated(()=>{
    //   console.log('------onUpdated-------');
    // })
    // onBeforeUnmount(()=>{
    //    console.log('------onBeforeUnmount-------');
    // })
    // onUnmounted(()=>{
    //   console.log('------onUnmounted-------');
    // })
    return{
        ...toRefs(state),
        increment
    }
   
  },
  // beforeCreate() {
  //   console.log("----beforeCreate----");
  // },
  // created() {
  //   console.log("----created----");
  // },
  // beforeMount() {
  //   console.log("----beforeMount----");
  // },
  // mounted() {
  //   console.log("----mounted----");
  // },
  // beforeUpdate() {
  //   console.log("----beforeUpdate----");
  // },
  // updated() {
  //   console.log("----updated----");
  // },
  // beforeUnmount() {
  //   console.log("----beforeUnmount----");
  // },
  // unmounted() {
  //   console.log("----unmounted----");
  // },
};
</script>

<style>
</style>